<template>
  <p>count: {{ counterStore.count }} - {{ counterStore.oddOrEven }}</p>
  <button @click="counterStore.increment(1, 2, 3, 4)">+</button>
  <button @click="counterStore.decrement()">-</button>

  <!-- 支持直接在组件中操作pinia中的数据 -->
  <button @click="counterStore.count++">+++</button>
</template>

<script lang="ts">
import { mapStores } from "pinia";
import useCounterStore from "./store/modules/counter";

export default {
  name: "App",
  mounted() {
    /*
      对 store 中state、getters、actions 都进行数据代理，所以访问数据时直接访问
      
      读
        this.counterStore.count
      写  
        this.counterStore.increment()
    */
    console.log(this);
  },
  computed: {
    // 将 store 映射到组件的计算属性中来
    // 将来可以通过 this.xxxStore
    ...mapStores(useCounterStore),
  },
};
</script>

<style></style>
